<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<title>随机英雄选择</title>
		<link rel="stylesheet" href="css/index1.css" />
		<script type="text/javascript" src="js/hero.js"></script>
		<script type="text/javascript" src="js/img.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	</head>
	<body oncontextmenu="return false;" onselectstart="return false">
		<div class="bg"></div>
		<div class="logo">
			老回<img src="img/logo.png">教育黑粉
		</div>
		<div class="bg1"></div>
		<div class="container">
			<div class="title">
				<div class="tt">
					随机英雄 Random Hero
				</div>
			</div>
			<div class="hero_box">
				<div class="hero_list">

				</div>
			</div>
			<div class="buttons">
				<input type="button" class="but1 but" value="随机选择"></input><br />
				<!-- <a href="javascript:;" class="but2">历史记录</a> -->
			</div>
		</div>
		<div class="bg2"></div>
		<div class="select-wrapper">
			<p class="choosed-type"><label class="tname">全部　</label>▼</p>
			<ul class="hero-type" style="display: none;">
				<li data-type="all">全部　</li>
				<li data-type="ss">射手　</li>
				<li data-type="zs">战士　</li>
				<li data-type="fs">法师　</li>
				<li data-type="fz">辅助　</li>
				<li data-type="ck">刺客　</li>
				<li data-type="tk">坦克　</li>
			</ul>
		</div>
		<div class="choose_box">
			<div class="left_pic">
				<div class="random_pic">
					<img>
				</div>
				<div class="hero_name"></div>
			</div>
			<div class="right_pic">
				<div class="random_pic">
					<img>
				</div>
				<div class="hero_name"></div>
			</div>
		</div>
		<div class="copyright">Copyright © 2019 神秘的成成. All Rights Reserved.</div>
		<script>
			var currList = new Array();
			var touchtime = new Date().getTime();
			var mychoice = '';

			function showHero(job) {
				$('.hero_list div').remove();
				currList = new Array();
				for (var i = heroCount; i >= 1; i--) {
					var h = hero['_' + i];
					var flag = false;
					if (job == 'all') {
						flag = true;
					} else {
						if (h.job1 == job || h.job2 == job) {
							flag = true;
						}
					}
					if (flag && h.valid) {
						currList.push('_' + i);
						$('<div data-type="' + '_' + i + '"><img src="' + img_head + imgs['_' + i] + '"></div>').appendTo($('.hero_list'));
					}
				}
				$('.hero_list div').off().on('click', function() {
					if (new Date().getTime() - touchtime < 500) {
						// console.log("dblclick");
						mychoice = $(this).attr('data-type');
					} else {
						touchtime = new Date().getTime();
						mychoice = '';
					}
				});
			}
			var stime = new Date().getTime();
			var chooseRandomL;
			var chooseRandomR;
			var currRandom;
			var maxtimeL = 1500;
			var maxtimeR = 1500;
			var runningFlagL = false;
			var runningFlagR = false;

			function showRandomPic(time, pos) {
				var max = currList.length;
				var random = parseInt(Math.random() * max);
				currRandom = hero[currList[random]];
				$('.choose_box .' + pos + ' img').attr('src', img_head + imgs['_' + currRandom.id]);
				$('.choose_box .' + pos + ' .hero_name').html(currRandom.name);
				var ntime = new Date().getTime();
				if (ntime - stime > time) {
					currRandom = chooseRandomL ? chooseRandomL : currRandom;
					if (pos.indexOf('left') != -1) {
						$('.choose_box .' + pos + ' img').attr('src', img_head + imgs['_' + currRandom.id]);
						$('.choose_box .' + pos + ' .hero_name').html(currRandom.name);
						runningFlagL = false;
						chooseRandomL = null;
					}
					if (pos.indexOf('right') != -1) {
						$('.choose_box .' + pos + ' img').attr('src', img_head + imgs['_' + currRandom.id]);
						$('.choose_box .' + pos + ' .hero_name').html(currRandom.name);
						runningFlagR = false;
						chooseRandomR = null;
					}
				} else {
					setTimeout("showRandomPic(" + time + ", '" + pos + "')", 50);
				}
			}
			$(function() {
				$('.choosed-type').off().on('click', function() {
					if (!runningFlagL && !runningFlagR) {
						$('.hero-type').toggle();
					}
				});
				$('.hero-type li').off().on('click', function() {
					if (!runningFlagL && !runningFlagR) {
						$('.bg2').hide();
						$('.choose_box').hide();
						var t = $(this).attr('data-type');
						$('.hero-type').hide();
						$('.tname').html($(this).text());
						showHero(t);
					}
				});
				$('.bg2').off().on('click', function() {
					$('.hero-type').hide();
					if (!runningFlagL && !runningFlagR) {
						$('.bg2').hide();
						$('.choose_box').hide();
					}
				});
				$('.choose_box').off().on('click', function() {
					$('.hero-type').hide();
					if (!runningFlagL && !runningFlagR) {
						$('.bg2').hide();
						$('.choose_box').hide();
					}
				});
				$('.but1').off().on('click', function() {
					$('.hero-type').hide();
					if (!runningFlagL && !runningFlagR) {
						$('.bg2').show();
						$('.choose_box').show();
						runningFlag = true;
						if (mychoice && currList.indexOf(mychoice) != -1) {
							chooseRandomL = hero[mychoice];
							chooseRandomR = hero[mychoice];
							mychoice = '';
						}
						stime = new Date().getTime();
						maxtimeL = 1000 + Math.random() * 500;
						maxtimeR = 1000 + Math.random() * 500;
						showRandomPic(maxtimeL, 'left_pic');
						showRandomPic(maxtimeR, 'right_pic');
					}
				}).on('touchstart', function() {
					if (!runningFlagL && !runningFlagR) {
						$('.but1').addClass('but_click');
						setTimeout(function() {
							$('.but1').removeClass('but_click');
						}, 200);
					}
				});
				showHero('all');
			});
		</script>
	</body>
</html>
